<template>
  <el-dialog width="500px" :visible.sync="isVisible" :title="title" :close-on-click-modal="false">
    <el-form ref="forgetPasswordForm" :model="form" :rules="rules" size="medium" label-width="100px">
      <el-form-item label="手机号" prop="phone">
        <el-input v-model="form.phone" placeholder="请输入手机号" style="width: 244px;" clearable></el-input>
      </el-form-item>
      <el-form-item label="验证码" prop="code">
        <el-input v-model="form.code" placeholder="请输入验证码" style="width: 244px;" clearable></el-input>
        <el-button v-show="!countDown" style="color: var(--primaryColor); border: none;" @click="getSMSCodeByPhone">
          获取验证码
        </el-button>
        <el-button v-show="countDown" style="color: var(--primaryColor); border: none;">
          {{ countDown }}s
        </el-button>
      </el-form-item>
      <el-form-item label="密码" prop="pwd">
        <el-input v-model="form.pwd" placeholder="请输入新密码" type="password" style="width: 244px;" clearable></el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="checkPassword">
        <el-input v-model="form.checkPassword" placeholder="请再次输入新密码" type="password" style="width: 244px;" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-button class="modify-button" type="primary" :loading="submitLoading" @click="onClickConfirm">确定</el-button>
        <el-button class="modify-button" @click="isVisible = false">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>
<script>
import { request } from "@/util/request.js"

export default {
  inheritAttrs: false,
  components: {},
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ''
    },
  },
  data() {
    return {
      countDown: '',
      form: this.initForm(),
      submitLoading: false,
      rules: {
        phone: [
          { required: true, message: '请输入手机号', trigger: 'change' },
        ],
        code: [
          { required: true, message: '请输入验证码', trigger: 'change' },
        ],
        pwd: [
          { required: true, message: '请输入新密码', trigger: 'change' },
        ],
        checkPassword: [
          { required: true, message: '请再次输入新密码', trigger: 'change' },
        ],
      },
    }
  },
  computed: {
    // 弹窗是否可见
    isVisible: {
      get() {
        return this.dialogVisible
      },
      set() {
        this.close()
        this.reset()
      }
    },
  },
  watch: {},
  created() {},
  mounted() {},
  methods: {
    initForm() {
      this.submitLoading = false
      return {
        phone: undefined,
        code: undefined,
        pwd: undefined,
        checkPassword: undefined,
      }
    },
  
    close() {
      this.$emit('update:dialogVisible', false)
    },
    
    reset() {
      this.$refs['forgetPasswordForm'].clearValidate()
      this.$refs['forgetPasswordForm'].resetFields()
      this.form = this.initForm()
    },

    getSMSCodeByPhone(){
      this.$refs['forgetPasswordForm'].validateField('phone', (errorMessage) => {
        if (errorMessage) {
          return this.$message.error(errorMessage);
        }
        const TIME_COUNT = 60
        request({
          method: 'POST',
          url: 'sysUser/zhyz',
          data: this.form.phone
        }).then(res => {
          if (![null, 0].includes(res.code)) {
            return this.$message.error(res.msg);
          }
          if (!this.timer) {
            this.countDown = TIME_COUNT;
            this.timer = setInterval(() => {
              if (this.countDown > 0 && this.countDown <= TIME_COUNT) {
                this.countDown--;
              } else {
                clearInterval(this.timer);
                this.timer = null;
              }
            }, 1000)
          }
          this.$message.success(res.msg);
        })
      })
    },

    onClickConfirm() {
      this.$refs['forgetPasswordForm'].validate(valid => {
        if (!valid) return
        if (this.form.pwd !== this.form.checkPassword) {
          return this.$message.error('两次输入的密码不一致！')
        }
        this.submitLoading = true
        request({
          method: 'POST',
          url: 'sysUser/xgmm',
          params: {
            ...this.form,
            checkPassword: undefined,
          }
        }).then(res => {
          if (![0, 200].includes(res.code)) {
            return this.$message.error(res.msg)
          }
          this.$message.success('修改成功')
          this.$emit('submitted')
          this.isVisible = false
        }).finally(() => {
          this.submitLoading = false
        })
      })
    },

  }
}

</script>
<style lang="stylus" scoped>

.modify-button 
  width: 120px
</style>